import React, { useEffect, useState } from 'react';
import { Table, Form, Icon, Button, Input, Collapse } from 'antd'
// 引入样式
import './index.less'

// 需要声明它的路由和菜单 
// 引入列表请求
import { getList } from '@/api/order'

const { Panel } = Collapse
const cloumns = [
    {
        title: 'Id',
        dataIndex: 'id',
        key: 'id',
        width: 120,
        align: 'center'
    },
    {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        align: 'center'
    },
    {
        title: '客户',
        dataIndex: 'author',
        key: 'author',
        align: 'center',
        width: 140
    },
    {
        title: '购买量',
        dataIndex: 'sale',
        key: 'sale',
        align: 'center',
        width: 160
    },
    {
        title: '购买时间',
        dataIndex: 'date',
        key: 'date',
        align: 'center',
        width: 190
    },
]
let saveList = [] // 备份list数据
const OrderList = () => {
    // 声明部分
    const [list, setList] = useState([]) // 列表数据
    const [id, setId] = useState(null) // id
    const [customer, setCustomer] = useState('') // 客户

    // 执行部分
    async function queryData() {
        const { data: { data: { items } } } = await getList()
        saveList = items
        setList(items)
    }
    // 初始化执行
    useEffect(() => {
        queryData()
    }, [])

    // 表格多选项改变函数
    const rowChange = () => {

    }
    const rowSelection = {
        selectedRowKeys: [],
        onchange: rowChange
    }
    const idChange = (event) => {
        // 修改 查询id值 
        const id = Number(event.target.value)
        setId(id)
    }
    const customerChange = (event) => {
        // 修改 查询客户 
        setCustomer(event.target.value)
    }
    // 搜索
    const search = () => {
        // 我们这里会根据 id 和 客户 过滤 list
        setList(() => {
            console.log(id, customer, !id && !customer, saveList)
            if (!id && !customer) {
                return saveList
            }
            return list.filter(item => {
                // 有 id 和 客户 需要 同时比较
                // 有id 则 比较id,
                // 有客户 则比较客户
                return (id && customer && item.id === id && item.author === customer) || (id && item.id === id) || (customer && item.author === customer)
            }).map(data => data)
        })
    }
    // 导出
    const exportList = ()=>{
        import("@/lib/exportExcel").then((excel) => {
            const tHeader = ["Id", "标题", "客户", "购买量", "日期"];
            const filterVal = ["id", "title", "author", "sale", "date"];
            const data = formatJson(filterVal, list);
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: '订单列表',
            });
          });
    }
    function formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }
    return (
        // 上下两栏 ，上栏是搜索项 下栏是列表
        <div className='order-list'>
            <Collapse defaultActiveKey={['1']} className='filter'>
                {/* 搜索项 */}
                <Panel header='搜索项' key="1">
                    <Form layout='inline'>
                        <Form.Item label='Id'>
                            <Input placeholder='请输入Id' style={{ width: '120px' }} onChange={idChange} />
                        </Form.Item>
                        <Form.Item label='客户'>
                            <Input placeholder='请输入客户' style={{ width: '120px' }} onChange={customerChange} />
                        </Form.Item>
                        <Form.Item >
                            <Button type='primary' onClick={search}>搜索</Button>
                        </Form.Item>
                        <Form.Item >
                            <Button type='primary' onClick={exportList}>导出</Button>
                        </Form.Item>
                    </Form>
                </Panel>
            </Collapse>
            {/* 列表 */}
            <Table
                bordered
                columns={cloumns}
                rowKey={(record) => record.id}
                pagination={true}
                rowSelection={rowSelection}
                dataSource={list}
            />
        </div>
    )
}

export default OrderList